<template>
    <div class="upload-common">
      <!-- 上传组件 -->
       <div style="border: 2px solid red;display: flex;">

       
      <el-upload
        :action="uploadUrl"
        :headers="headers"
        :method="method"
        :data="uploadData"
        :name="fileName"
        :file-list="fileList"
        :multiple="multiple"
        :limit="limit"
        :on-exceed="handleExceed"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        :on-preview="handlePreview"
        :list-type="listType"
        :auto-upload="autoUpload"
        :disabled="disabled"
        :class="{ 'upload-disabled': disabled }"
      >
        <!-- 上传按钮 -->
        <slot name="trigger">
          <el-button 
            size="small" 
            type="primary"
            :icon="uploadIcon"
          >
            {{ uploadText }}
          </el-button>
        </slot>
      </el-upload>
      
        <!-- 上传提示 -->
        <div slot="tip" class="upload-tip" v-if="showTip">
          {{ tipText || `支持上传 ${accept.join(', ')} 格式,单张图片大小不超过 ${fileSize}MB${multiple ? `，最多上传 ${limit} 个` : ''}` }}
        </div>
    </div>
      <!-- 预览弹窗 -->
      <el-dialog 
        :visible.sync="previewVisible" 
        title="预览" 
        width="80%"
        append-to-body
      >
        <img 
          :src="previewUrl" 
          alt="预览图" 
          class="preview-img"
          v-if="listType === 'picture' || listType === 'picture-card'"
        >
        <div v-else>{{ previewUrl }}</div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UploadCommon',
    props: {
      // 上传接口地址（必传）
      uploadUrl: {
        type: String,
        required: true
      },
      // 请求头（如携带token）
      headers: {
        type: Object,
        default: () => ({})
      },
      // 请求方法
      method: {
        type: String,
        default: 'post'
      },
      // 额外上传参数
      uploadData: {
        type: Object,
        default: () => ({})
      },
      // 上传文件字段名（后端接收的key）
      fileName: {
        type: String,
        default: 'file'
      },
      // 是否支持多文件上传
      multiple: {
        type: Boolean,
        default: false
      },
      // 最大上传数量
      limit: {
        type: Number,
        default: 5
      },
      // 已上传文件列表（用于回显）
      fileList: {
        type: Array,
        default: () => []
      },
      // 允许上传的文件格式（如['jpg', 'png']）
      accept: {
        type: Array,
        default: () => ['jpg', 'jpeg', 'png', 'gif']
      },
      // 单个文件大小限制（MB）
      fileSize: {
        type: Number,
        default: 5
      },
      // 上传列表的类型（text/picture/picture-card）
      listType: {
        type: String,
        default: 'picture-card' // 图片卡片式（常用）
      },
      // 是否自动上传
      autoUpload: {
        type: Boolean,
        default: true
      },
      // 是否禁用上传
      disabled: {
        type: Boolean,
        default: false
      },
      // 上传按钮文本
      uploadText: {
        type: String,
        default: '点击上传'
      },
      // 上传按钮图标
      uploadIcon: {
        type: String,
        default: 'el-icon-upload'
      },
      // 是否显示提示文本
      showTip: {
        type: Boolean,
        default: true
      },
      // 自定义提示文本（覆盖默认提示）
      tipText: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        previewVisible: false, // 预览弹窗显示状态
        previewUrl: '' // 预览地址
      };
    },
    methods: {
      // 文件超出限制时触发
      handleExceed(files, fileList) {
        this.$message.warning(`最多只能上传 ${this.limit} 个文件`);
        this.$emit('exceed', files, fileList);
      },
  
      // 上传前校验
      handleBeforeUpload(file) {
        // 校验文件格式
        const fileExt = file.name.split('.').pop().toLowerCase();
        if (!this.accept.includes(fileExt)) {
          this.$message.error(`不支持 ${fileExt} 格式，请上传 ${this.accept.join(', ')} 格式`);
          return false;
        }
  
        // 校验文件大小（MB转字节）
        const maxSize = this.fileSize * 1024 * 1024;
        if (file.size > maxSize) {
          this.$message.error(`单个文件大小不能超过 ${this.fileSize}MB`);
          return false;
        }
  
        // 触发父组件的上传前钩子（可做额外校验）
        return this.$emit('before-upload', file);
      },
  
      // 上传成功回调
      handleSuccess(response, file, fileList) {
        // 假设后端返回格式：{ code: 200, data: { url: 'xxx' } }
        // 可根据实际接口调整
        if (response.code === 200) {
          this.$message.success('上传成功');
          // 将后端返回的URL存入file对象（用于回显和提交）
          file.url = response.data.url;
          // 触发父组件成功事件，传递最新文件列表
          this.$emit('success', response, file, fileList);
          this.$emit('update:fileList', fileList);
        } else {
          this.$message.error(`上传失败：${response.msg || '未知错误'}`);
          this.$emit('error', response, file, fileList);
        }
      },
  
      // 上传失败回调
      handleError(error, file, fileList) {
        this.$message.error('上传失败，请重试');
        this.$emit('error', error, file, fileList);
      },
  
      // 移除文件回调
      handleRemove(file, fileList) {
        this.$emit('remove', file, fileList);
        this.$emit('update:fileList', fileList);
      },
  
      // 预览文件回调
      handlePreview(file) {
        this.previewUrl = file.url || file.response?.data?.url;
        this.previewVisible = true;
        this.$emit('preview', file);
      }
    }
  };
  </script>
  
  <style scoped>
  .upload-common {
    width: 100%;
    /* height: 100px; */
  }
  
  .upload-tip {
    margin-top: 10px;
    color: #606266;
    font-size: 12px;
  }
  
  .preview-img {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
  }
  
  .upload-disabled {
    cursor: not-allowed;
  }
  </style>